import React, {Component} from 'react'
import Header from './Header/Header'
import List from './List/List'
import Footer from './Footer/Footer'

import './App.css'

export default class App extends Component {

    state = {todos: [
        {id: '001', name: '吃饭', done: true},
        {id: '002', name: '睡觉', done: true},
        {id: '003', name: '敲字', done: false}
    ]}

    addTodo = (todoObj) => {
        const newTodos = [todoObj, ...this.state.todos]
        //更新状态
        this.setState({todos: newTodos})
    }

    updateTodo = (id, done) => {
        const {todos} = this.state
        const newTodos = todos.map((todo) => {
            if(todo.id === id) {
                return {...todo, done}
            }else {
                return todo
            }
        })
        this.setState({todos: newTodos})
    }

    render() {
        const {todos} = this.state
        return(
            <div className='todo-container'>
                <div className='todo-wrap'>
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} updateTodo={this.updateTodo}/>
                    <Footer />
                </div>
            </div>
        )
    }
}